import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Radio, Tabs, Row, Col, PageHeader } from 'antd';
import MyTable from "../MyTable";

const { TabPane } = Tabs;
const options = [
    { label: '启用', value: 1 },
    { label: '禁用', value: 0 },
]

const modelData = {
    id: '',
    name: '',
    status: 1,
    actions: [],
    optionalFields: [],
    parents: [],
    properties: {
        type: [],
    },
}

const ModalForm = (props) => {
    const [form] = Form.useForm();
    const [tableProps, setTableProps] = useState({});

    const isEditType = props.title === '编辑权限';

    const tableColumn = [
        {
            title: '操作类型',
            dataIndex: 'action',
        },
        {
            title: '名称',
            dataIndex: 'name',
        },
        {
            title: '描述',
            dataIndex: 'describe',
        }
    ]

    useEffect(() => {
        if (isEditType) {
            form.setFieldsValue({
                id: props.data.id,
                name: props.data.name,
                status: props.data.status,
            })
            setTableProps({
                ...tableProps, columns: [...tableColumn], data: [...props.data.actions]
            })
        }
    }, [])

    return <Modal
        visible={props.visible}
        width={800}
        title={props.title}
        okText="确定"
        cancelText="取消"
        onCancel={() => { props.handleCancel() }}
        onOk={() => {
            form
                .validateFields()
                .then((values) => {
                    form.resetFields();
                    console.log(values);
                    props.handleOk({ ...modelData, ...values });
                })
                .catch((info) => {
                    console.log('Validate Failed:', info);
                });
        }}>

        <Tabs defaultActiveKey="1">
            <TabPane tab="基本信息" key="1">
                <Form
                    form={form}
                    name="form_in_modal"
                    initialValues={{
                        id: '',
                        name: '',
                        status: -1
                    }}>
                    <Row gutter={24} justify="center">
                        <Col span={10}>
                            <Form.Item
                                name='id'
                                label='权限标识符（ID）'
                                rules={[
                                    {
                                        required: true,
                                        message: '请填写权限ID'
                                    }
                                ]}>
                                <Input disabled={props.title === '编辑权限'} />
                            </Form.Item>
                        </Col>
                        <Col span={10}>
                            <Form.Item
                                name='name'
                                label='权限名称'
                                rules={[
                                    {
                                        required: true,
                                        message: '请填写权限名称'
                                    }
                                ]}>
                                <Input />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={10}>
                        <Col span={4}></Col>
                        <Col span={6}>
                            <Form.Item
                                label='状态：'
                                name='status'
                                rules={[
                                    { required: true, message: '请选择状态' }
                                ]}>
                                <Radio.Group
                                    options={options}
                                    optionType="button"
                                    buttonStyle='solid'
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                    <PageHeader title={<dvi style={{ fontSize: '14px', color: '#aaa' }}>操作配置</dvi>}>
                        <Form.Item
                            name='actions'>
                            <MyTable {...tableProps} data={[{
                                action: 'query',
                                name: '查询列表',
                                describe: '查询列表',
                            }]}
                            columns={tableColumn} />
                        </Form.Item>
                    </PageHeader>
                </Form>
            </TabPane>
        </Tabs>

    </Modal>
};

export default ModalForm